<template>
 <div>
    <!-- 顶部标题 -->
    <van-nav-bar
    class="van-nav-bar"
     left-text="返回"
     left-arrow
     @click-left="$router.back()"
  />
   <!-- 输入手机号 -->
  <span class="span">手机号注册</span>
  <van-cell-group>
  <van-field
    v-model="phone"
    placeholder="请输入手机号"
    size="samll"
    clearable
    :error-message="errorMessage.phoneInput"
  />
  <!-- 短信验证码 -->
<van-field
  v-model="code"
  center
  clearable
  placeholder="暂时不可用"
   :error-message="errorMessage.codeInput"
>
  <template #button>
    <van-button 
    size="samll" 
    type="primary" 
    round 
    class="van-button"
    >发送验证码</van-button>
   </template>
 </van-field>

  <!-- 输入密码 -->
  <van-field
    v-model="pwd"
    clearable
    placeholder="请输入六位数密码"
    type="password"
    autofocus
    :error-message="errorMessage.pwdInput"
  />
   </van-cell-group>
   <button class="button" @click="checkFrom">注册</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      code: "",
      pwd: "",
      errorMessage: { phoneInput: "", pwdInput: "", codeInput: "" },
      phoneState: false,
      pwdState: false
    };
  },
  mounted() {
    // this.checkPwd();
  },
  watch: {
    pwd() {
      this.checkPwd();
    },
    code() {
      this.checkCode();
    },
    phone() {
      this.checkPhone();
    }
  },
  methods: {
    //验证手机号是否符合要求
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.errorMessage.phoneInput = "";
        this.phoneState = true;
      } else {
        this.errorMessage.phoneInput = "手机号码格式错误!";
        this.phoneState = false;
        return;
      }
    },

    //验证短信验证码
    checkCode() {},
    //验证密码框
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.errorMessage.pwdInput = "";
        this.pwdState = true;
      } else {
        this.errorMessage.pwdInput = "密码格式错误!";
        this.pwdState = false;
        return;
      }
    },
    checkFrom() {
      this.checkPhone();
      this.checkCode();
      this.checkPwd();
      if ((this.phoneState = this.pwdState)) {
        // 发送post请求，传递两个参数：phone,pwd
        this.axios
          .post("/user/register", `phone=${this.phone}&spwd=${this.pwd}`)
          .then(res => {
            // console.log(res.data);
            if (res.data.code == 200) {
              // 注册成功
              this.$toast("注册成功!");
              this.$router.push("/login");
            } else if (res.data.code == 201) {
              // 用户已存在
              this.$toast("注册失败，用户已存在!");
            }
          });
      }
    }
  }
};
</script>
<style scoped>
.span {
  font-size: 1.75rem;
  font-weight: 600;
  margin-left: 2.275rem;
}
.van-cell-group {
  margin-top: 5.5rem;
  position: absolute;
}
.van-cell {
  font-size: 1.25rem;
}
.button {
  margin-top: 20.5rem;
  width: 100%;
  height: 3.125rem;
  border-radius: 1.25rem;
  color: #ffffff;
  background-color: #1482ff;
  transition: 0.1s;
  border: none;
}
.van-button {
  background: #ffffff;
  padding: 0.3125rem;
  border-color: #1482ff;
  color: #1482ff;
}
.button:active {
  background-color: #6da5e6;
  font-size: 0.8rem;
  transform: scale(0.9);
}
</style>

